<!--<div id="api-breadcrumb-bar">-->
    <!--<breadcrumbs>-->
        <!--<li breadcrumb label="APIs" class="active"></li>-->
    <!--</breadcrumbs>-->
<!--</div>-->
<page-error [error]="pageError" *ngIf="pageError"></page-error>
<div class="container-fluid api-list-apis" *ngIf="!pageError">
    <div class="row toolbar-pf">
        <div class="col-sm-12">
            <form class="toolbar-pf-actions" (submit)="filterApis()" #filterForm="ngForm">
                <div class="form-group toolbar-pf-filter">
                    <label class="sr-only" for="filter">Name</label>
                    <div class="input-group" style="width: 100%">
                        <input autocomplete="off" name="name-filter" [(ngModel)]="filters.nameFilter" type="text" class="form-control name-filter" id="filter" placeholder="Filter by name or tag...">
                    </div>
                </div>
                <div class="form-group">
                    <button class="btn btn-link" type="button" (click)="toggleSortDirection()">
                        <span *ngIf="filters.sortDirection === 'ASC'" class="fa fa-sort-alpha-asc"></span>
                        <span *ngIf="filters.sortDirection === 'DESC'" class="fa fa-sort-alpha-desc"></span>
                    </button>
                </div>
                <div class="form-group">
                    <button class="btn btn-danger" type="button" [disabled]="selectedApis.length == 0" (click)="confirmDeleteDialog.open()">Delete</button>
                </div>
                <div class="form-group">
                    <a class="btn btn-primary" [routerLink]="['create']"><span class="pficon pficon-add-circle-o"></span> Create New API</a>
                    <a class="btn btn-default" [routerLink]="['import']"><span class="pficon pficon-import"></span> Import API</a>
                </div>
                <div class="form-group toolbar-pf-view-selector">
                    <ul class="list-inline">
                        <li [class.active]="filters.layout === 'list'"><a (click)="setListLayout()"><i class="fa fa-th-list"></i></a></li>
                        <li [class.active]="filters.layout === 'card'"><a (click)="setCardLayout()"><i class="fa fa-th"></i></a></li>
                    </ul>
                </div>
            </form>
            <div class="row toolbar-pf-results">
                <div class="col-sm-12">
                    <h5 *ngIf="numApisToDelete === 0">{{ filteredApis.length }} APIs found <a *ngIf="allApis.length != filteredApis.length"
                                                                class="clear-filters" (click)="clearFilters()">(out of {{ allApis.length }} total)</a></h5>
                    <h5 *ngIf="numApisToDelete > 0"><span class="spinner spinner-xs spinner-inline"></span> Deleting {{ numApisToDelete }} APIs, please wait...</h5>
                </div>
            </div>
        </div>
    </div>
    <div class="row api-list-items">
        <div class="col-md-12 empty-state" *ngIf="isLoaded('apis') && allApis.length === 0">
            <div class="blank-slate-pf">
                <div class="blank-slate-pf-icon">
                    <span class="pficon pficon pficon-add-circle-o"></span>
                </div>
                <h1>No APIs Found</h1>
                <p>
                    It seems you have no APIs in the Studio yet.  This is probably the first time you've used it and haven't
                    created or improted any APIs yet!
                </p>
                <p>
                    Click below to either create a new API or import an existing API to the Studio.
                </p>
                <div class="blank-slate-pf-main-action">
                    <div class="btn-group">
                        <a routerLink="/apis/create" class="btn btn-primary btn-lg"><span class="pficon pficon-add-circle-o"></span> Create New API</a>
                        <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a routerLink="/apis/import"><span class="pficon pficon-import"></span> Import API</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8 none-matched-state" *ngIf="filteredApis.length === 0 && isFiltered()">
            <div class="alert alert-info">
                <span class="pficon pficon-info"></span>
                <strong>No APIs matched the filter!</strong> Try changing your filter criteria - there is definitely at least one API you can work on...
            </div>
        </div>

        <!-- The 'loading APIs' card -->
        <div class="col-md-12" *ngIf="!isLoaded('apis')">
            <div class="container-fluid container-cards-pf">
                <div class="row row-cards-pf">
                    <div class="card-pf card-pf-accented">
                        <div class="card-pf-heading">
                            <h1 class="card-pf-title">
                                <p><span class="spinner spinner-xs spinner-inline"></span> Loading API Designs...</p>
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- The list or card view -->
        <div class="col-md-12" *ngIf="isLoaded('apis')">
            <apis-list *ngIf="filters.layout === 'list'" [apis]="filteredApis" [selectedApis]="selectedApis"
                       (onTagSelected)="onTagSelected($event)"
                       (onApiSelected)="onSelected($event)" (onApiDeselected)="onDeselected($event)"></apis-list>
            <apis-cards *ngIf="filters.layout === 'card'" [apis]="filteredApis" [selectedApis]="selectedApis"
                        (onTagSelected)="onTagSelected($event)"
                        (onApiSelected)="onSelected($event)" (onApiDeselected)="onDeselected($event)"></apis-cards>
        </div>
    </div>
</div>
<confirm-delete-dialog #confirmDeleteDialog (onDelete)="deleteApis()">
    <p *ngIf="selectedApis.length === 1">Do you really want to delete the selected API?</p>
    <p *ngIf="selectedApis.length > 1">Do you really want to delete the <strong>{{ selectedApis.length }}</strong> selected APIs?</p>

    <div class="alert alert-danger">
        <span class="pficon pficon-error-circle-o"></span>
        <strong>NOTE:</strong>
        <span>This will <strong>permanently</strong> delete the API definition from Apicurio Studio.  This operation cannot be undone.</span>
    </div>
</confirm-delete-dialog>
